<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>POD列表</title>
    <!-- 引入Vue -->
    <script src="/js/vue-2.6.14.js"></script>
    <!-- 引入Axios -->
    <script src="/js/axios.min.js"></script>
    <!-- 引入Bootstrap CSS -->
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <!-- 引入Font Awesome -->
    <link rel="stylesheet" href="/css/font-awesome.min.css">
</head>
<body>
<div class="container mt-5" id="app">
    <div class="row mb-3">
        <div class="col-md-6">
            <h2>POD列表</h2>
        </div>
        <div class="col-md-6 text-right">
            <button class="btn btn-success" @click="exportToExcel">
                <i class="fa fa-download mr-2"></i>导出Excel
            </button>
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            <div v-if="loading" class="text-center">
                <i class="fa fa-spinner fa-spin fa-3x"></i>
                <p class="mt-2">加载中...</p>
            </div>

            <div v-else-if="error" class="alert alert-danger">
                <i class="fa fa-exclamation-circle mr-2"></i>{{ error }}
            </div>

            <div v-else>
                <table class="table table-striped table-hover">
                    <thead class="thead-dark">
                    <tr>
                        <th class="text-center">序号</th>
                        <th class="text-center">名称</th>
                        <th class="text-center">状态</th>
                        <th class="text-center">重启次数</th>
                        <th class="text-center">年龄</th>
                        <th class="text-center">命名空间</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(user, index) in k8sList" :key="user.id">
                        <td class="text-center">{{ index + 1 }}</td>
                        <td class="text-center">{{ user.podName }}</td>
                        <td class="text-center">{{ user.ready }}</td>
                        <td class="text-center">{{ user.restarts }}</td>
                        <td class="text-center">{{ user.age }}</td>
                        <td class="text-center">{{ user.namespace}}</td>
                    </tr>
                    <tr v-if="k8sList.length === 0">
                        <td colspan="6" class="text-center">没有数据</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                k8sList: [],
                loading: true,
                error: ''
            }
        },
        mounted() {
            // 页面加载完成后获取用户数据
            this.fetchUsers();
        },
        methods: {
            fetchUsers() {
                axios.get('http://localhost:8850/monitor/selectPodList')
                    .then(response => {
                        this.k8sList = response.data;
                        this.loading = false;
                    })
                    .catch(error => {
                        this.error = '获取数据失败: ' + (error.response?.data || error.message);
                        this.loading = false;
                        console.error('Error fetching k8sList:', error);
                    });
            },
            exportToExcel() {
                // 跳转到导出接口，触发文件下载
                window.location.href = 'https://www.baidu.com';
            },
        }
    });
</script>

<!-- 引入Bootstrap JS依赖 -->
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.bundle.min.js"></script>
<style>
    /* 表格内容水平+垂直居中 */
    .table-center td, .table-center th {
        text-align: center; /* 水平居中 */
        vertical-align: middle !important; /* 垂直居中（覆盖Bootstrap默认样式） */
    }
</style>
</body>
</html>
